<!--
 * @Author: 詹真琦(legendryztachi@gmail.com)
 * @Date: 2022-07-12 11:27:27
 * @LastEditors: 代琪 1529992814@qq.com
 * @LastEditTime: 2022-08-12 14:48:55
 * @FilePath: \code\ctp-static-portal-front\src\views\pagelayout\layout01\components\panel\index.vue
 * @Description: 每一个栏目
-->
<template>
  <div :style="[style, { width: contentWidth + 'px' }]">
    <ContentPanel
      v-if="data.sst === '0' && data.type == 'section'"
      :containerStyle="{
        background: `${
          data.customStyle.isSectionBg
            ? data.customStyle.backgroundColor
            : sectionThemeData.sectionTheme.sectionBodyBgc
        } url(${sectionThemeData.sectionTheme.sectionBodyBgi})`,
        borderBottomLeftRadius: `${sectionThemeData.sectionTheme.sectionPanelBorderRadius}px`,
        borderBottomRightRadius: `${sectionThemeData.sectionTheme.sectionPanelBorderRadius}px`,
        borderTopLeftRadius: `${sectionThemeData.sectionTheme.sectionPanelBorderRadius}px`,
        borderTopRightRadius: `${sectionThemeData.sectionTheme.sectionPanelBorderRadius}px`,
        overflow: 'hidden'
      }"
      :sectionStyle="sectionThemeData.sectionTheme"
      :sectionThemeData="sectionThemeData"
      :sectionData="data.sectionData"
      :setSectionData="(fetchedData) => setSectionData(data.sectionData, fetchedData)"
      :contentWidth="contentWidth"
      :entityId="data.entityId"
      :panel="data"
    />
    <Tabs
      v-else
      :data="data"
      :sectionThemeData="sectionThemeData"
      :sectionStyle="sectionThemeData.sectionTheme"
      :customStyle="data.customStyle ? data.customStyle : {}"
      :entityId="data.entityId"
      :contentWidth="contentWidth"
      :type="data.type"
      :isMultiSection="data.type === 'multiSection' && typeof data.tabIndex === 'number'"
    />
  </div>
</template>
<script>
  import ContentPanel from '@/components/tabs/content-panel';
  export default {
    name: 'Panel',
    components: { ContentPanel },
    props: {
      //面板数据
      data: { type: Object },
      //主题
      sectionThemeData: { type: Object },
      //宽度
      mainWidth: {
        type: Number,
        default: 0
      }
    },
    data() {
      return {
        //面板样式
        style: {}
      };
    },
    computed: {
      //面板宽度
      contentWidth() {
        //减去30padding
        return (
          (this.data.span / 12) * (this.mainWidth - 30) -
          this.sectionThemeData.layoutTheme.sectionSpacing
        );
      }
    },
    created() {
      const space = this.sectionThemeData.layoutTheme.sectionSpacing;
      const padding = Math.ceil(space / 2) + 'px';
      this.style = {
        marginBottom: `${space}px`,
        paddingLeft: padding,
        paddingRight: padding
      };
    },
    methods: {
      setSectionData(sectionData, data) {
        sectionData.data = data;
      }
    }
  };
</script>
